<!-- CustomSwiper.vue -->
<template>
    <div class="swiper-box">
      <div class="swiper-list" :class="{ swleft, swright }">
        <div
          class="swiper-item"
          v-for="(item, index) in swiperList"
          :key="index"
          :style="{
            backgroundColor: colorMap[item.value],
            'z-index': 999 - index,
            transform: `scale(${1 - (index - 1) * 0.1})`,
          }"
        >
          <img :src="item.image" alt="swiper" class="swiper-iamge">
          <h3>{{ item.title }}</h3>
        </div>
      </div>
      <div class="swiper-btn">
        <button class="btn" @click="changeSwiper(-1)">←</button>
        <button class="btn" @click="changeSwiper(1)">→</button>
      </div>
    </div>
  </template>
  
  <script>
  import { ref, onMounted } from 'vue';
  
  export default {
    name: 'CustomSwiper',
    props: {
      tabList: {
        type: Array,
        required: true,
      },
      colorMap: {
        type: Object,
        default: () => ({
          0: 'green',
          1: 'pink',
          2: 'yellow',
        }),
      },
    },
    setup(props) {
      const swiperList = ref([]);
      const clear = ref(null);
      const swleft = ref(false);
      const swright = ref(false);
  
      onMounted(() => {
        const list = [
          ...props.tabList.slice(-1),
          ...props.tabList,
          ...props.tabList.slice(0, 1),
        ];
        swiperList.value = list;
      });
  
      const debounce = (delay) => {
        if (clear.value) {
          return false;
        }
        clear.value = setTimeout(() => {
          clear.value = null;
        }, delay);
        return true;
      };
  
      const changeSwiper = (type) => {
        // 防抖
        if (!debounce(360)) {
          return;
        }
        if (type === 1) { // 下一个
          swleft.value = true;
          setTimeout(() => {
            swleft.value = false;
            swiperList.value.push(swiperList.value[2]);
            swiperList.value.splice(0, 1);
          }, 350);
        } else { // 上一个
          swright.value = true;
          setTimeout(() => {
            swright.value = false;
            swiperList.value.unshift(swiperList.value[swiperList.value.length - 3]);
            swiperList.value.pop();
          }, 350);
        }
      };
  
      return {
        swiperList,
        clear,
        swleft,
        swright,
        changeSwiper,
      };
    },
  };
  </script>
  
  <style scoped>
    .swiper-box {
    position: relative;
    overflow: hidden;
    }
    .swiper-btn {
    margin-left: 80px;
    margin-top: 10px;
    text-align: left;
    }
    .swiper-btn .btn {
        color: black;
        border: 2px solid black; /* 添加黑色描边 */
        background-color: transparent; /* 设置背景颜色为透明 */
        padding: 10px 20px; /* 添加内边距 */
        margin: 0 10px; /* 添加按钮之间的间距 */
        cursor: pointer; /* 添加鼠标悬停效果 */
        border-radius: 10px; /* 添加圆角 */
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .swiper-btn .btn:hover {
        background-color: black; /* 鼠标悬停时背景变为黑色 */
        color: white; /* 鼠标悬停时文字变为白色 */
    }
    .swiper-box .swiper-list {
    display: flex;
    height: 400px;
    overflow: hidden;
    }
    .swiper-box .swiper-list.swleft .swiper-item:nth-child(2) {
    animation: fadel 0.4s ease-in-out 1; /* 淡入淡出动画持续1秒，使用ease-in-out速度曲线，播放1次 */
    }
    .swiper-box .swiper-list.swleft .swiper-item:nth-child(3) {
    animation: fadel2 0.4s ease-in-out 1;
    }
    .swiper-box .swiper-list.swleft .swiper-item:nth-child(4) {
    animation: fadel3 0.4s ease-in-out 1;
    }
    .swiper-box .swiper-list.swleft .swiper-item:nth-child(5) {
    animation: fadel4 0.4s ease-in-out 1;
    }
    @keyframes fadel {
    0% { opacity: 1; left: 0; }
    100% { opacity: 0; left: -60px; }
    }
    @keyframes fadel2 {
    0% { left: 0; }
    100% { left: -60px; transform: scale(1); }
    }
    @keyframes fadel3 {
    0% { left: 0; }
    100% { left: -60px; transform: scale(0.9); }
    }
    @keyframes fadel4 {
    0% { left: 0; }
    100% { left: -60px; opacity: 1; transform: scale(0.8); }
    }

    .swiper-box .swiper-list.swright .swiper-item:nth-child(1) {
    animation: fader 0.4s ease-in-out 1; 
    }
    .swiper-box .swiper-list.swright .swiper-item:nth-child(2) {
    animation: fader2 0.4s ease-in-out 1;
    }
    .swiper-box .swiper-list.swright .swiper-item:nth-child(3) {
    animation: fader3 0.4s ease-in-out 1;
    }
    .swiper-box .swiper-list.swright .swiper-item:nth-child(4) {
    animation: fader4 0.4s ease-in-out 1;
    }
    @keyframes fader {
    0% { opacity: 0; left: 0; }
    100% { opacity: 1; left: 60px; transform: scale(1); }
    }
    @keyframes fader2 {
    0% { left: 0; }
    100% { left: 60px; transform: scale(0.9); }
    }
    @keyframes fader3 {
    0% { left: 0; }
    100% { left: 60px; transform: scale(0.8); }
    }
    @keyframes fader4 {
    0% { left: 0; }
    100% { left: 60px; opacity: 0; transform: scale(0.7); }
    }
    .swiper-box .swiper-list .swiper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    width: 600px;
    height: 400px;
    box-sizing: border-box;
    position: relative;
    background: #ccc; /* 默认背景色 */
    }
    .swiper-box .swiper-list .swiper-item .swiper-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    }
    .swiper-box .swiper-list .swiper-item h3 {
    position: absolute;
    bottom: 20px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 1;
    }
    .swiper-box .swiper-list .swiper-item+.swiper-item {
    margin-left: -540px;
    }
    .swiper-box .swiper-list .swiper-item:last-child {
    opacity: 0;
    }
    .swiper-box .swiper-list .swiper-item:first-child {
    opacity: 0;
    }
</style>